<template>
  <div id="chartAlarmLv" class="maxbox"></div>
</template>

<script>
let echarts = require("echarts");
export default {
    components: {},
    props: ['counts'],
    data() {
        return {
            chart: null
        };
    },
    created() { },
    mounted() {
        this.$nextTick(() => {
            this.chart = echarts.init(document.getElementById('chartAlarmLv'));
        });
    },
    methods: {
        refresh(){
            this.creatChart()
        },
        creatChart() {
            // let option = {
            //     color: ['#ff6148', '#ffd54f', '#4bbaff', '#44ffa2'],
            //     tooltip: {
            //         trigger: 'item'
            //     },
            //     series: [
            //         {
            //             name: '告警',
            //             type: 'pie',
            //             radius: ['40%', '70%'],
            //             avoidLabelOverlap: false,
            //             label: {
            //                 show: false,
            //                 position: 'center'
            //             },
            //             emphasis: {
            //                 label: {
            //                     show: true,
            //                     fontSize: '12',
            //                     fontWeight: 'bold'
            //                 }
            //             },
            //             labelLine: {
            //                 show: false
            //             },
            //             data: [
            //                 { value: 80, name: '一级警告' },
            //                 { value: 10, name: '二级警告' },
            //                 { value: 15, name: '三级警告' },
            //                 { value: 95, name: '四级警告' }
            //             ]
            //         }
            //     ]
            // };

            let option = {
                color: ['#ff6148', '#ffd54f', '#4bbaff', '#44ffa2'],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    show: false,
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '警告',
                        type: 'pie',
                        radius: ['35%', '60%'],
                        /* emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        }, */
                        /* emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        } */

                        label: {
                            show: true,
                            position: 'outer',
                            alignTo: 'labelLine',
                            // ·圆点
                            backgroundColor: 'auto', // 圆点颜色，auto：映射的系列色
                            height: 0,
                            width: 0,
                            lineHeight: 0,
                            // height,width.lineHeight必须为0
                            distanceToLabelLine: 0, // 圆点到labelline距离
                            borderRadius: 2.5,
                            padding: [2.5, -2.5, 2.5, -2.5],
                            formatter: '{a|{b}：{c}个}',
                            /* formatter: function(params) {
                                console.log(params);
                                return (`{a|{b}：{d}个}`);
                            }, */
                            rich: {
                                a: {
                                    color: '#fff',
                                    padding: [-17, -90, 0, -90]
                                }
                                /* b: {
                                    padding: [0, 10, 0, 0]
                                } */
                            }
                        },

                        labelLine: {
                            normal: {
                                length: 20,
                                length2: 90,
                                lineStyle: {
                                    width: 1
                                }
                            }
                        },
                        data: [
                            { value: this.counts[0], name: '一级警告' },
                            { value: this.counts[1], name: '二级警告' },
                            { value: this.counts[2], name: '三级警告' },
                            { value: this.counts[3], name: '四级警告' }
                        ]
                    }
                ]
            };

            
            this.chart.setOption(option);
        }
    }
};
</script>

<style lang="less" scoped>

</style>
